<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="400" height="350"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // --- Helper function to draw a light bulb ---
        function drawBulb(x, y) {
            const radius = 12;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();

            // Draw the filament loop inside
            ctx.beginPath();
            ctx.arc(x, y, radius * 0.7, Math.PI / 4, 3 * Math.PI / 4, true);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(x, y, radius * 0.7, 5 * Math.PI / 4, 7 * Math.PI / 4, false);
            ctx.stroke();
        }

        // --- Define coordinates for layout ---
        const xL = 100; // Left wire x-coordinate
        const xR = 300; // Right wire x-coordinate
        const yT = 80;  // Top wire y-coordinate
        const yB = 300; // Bottom wire y-coordinate
        const yM = 180; // Middle horizontal wire y-coordinate
        const xM_vert = 160; // Middle vertical wire x-coordinate

        // --- Draw Wires ---
        // Main rectangle
        ctx.beginPath();
        ctx.moveTo(xL, yT);
        ctx.lineTo(xR, yT); // Top
        ctx.lineTo(xR, yB); // Right
        ctx.lineTo(xL, yB); // Bottom
        ctx.closePath();   // Left
        ctx.stroke();

        // Middle horizontal wire
        ctx.beginPath();
        ctx.moveTo(xL, yM);
        ctx.lineTo(xR, yM);
        ctx.stroke();

        // Middle vertical wire (for #5 and S)
        ctx.beginPath();
        ctx.moveTo(xM_vert, yM);
        ctx.lineTo(xM_vert, 235); // Wire to switch
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(xM_vert, 275); // Wire from switch
        ctx.lineTo(xM_vert, yB);
        ctx.stroke();

        // --- Draw Battery and its connections ---
        const battX = 200;
        const battY_top = 40;
        // Connection to top wire
        ctx.beginPath();
        ctx.moveTo(battX, yT);
        ctx.lineTo(battX, battY_top + 20);
        ctx.stroke();
        // Positive plate (long)
        ctx.beginPath();
        ctx.moveTo(battX - 15, battY_top + 20);
        ctx.lineTo(battX + 15, battY_top + 20);
        ctx.stroke();
        // Negative plate (short)
        ctx.beginPath();
        ctx.moveTo(battX - 8, battY_top);
        ctx.lineTo(battX + 8, battY_top);
        ctx.stroke();
        // EMF Label
        ctx.font = "20px serif";
        ctx.fillText("ξ", battX + 20, battY_top + 15);


        // --- Draw Bulbs and Labels ---
        ctx.font = "bold 16px sans-serif";

        // Bulb #1
        drawBulb(xR, 130);
        ctx.fillText("#1", xR + 20, 135);

        // Bulb #2
        drawBulb(240, yM);
        ctx.fillText("#2", 210, yM - 10);

        // Bulb #3
        drawBulb(xR, 240);
        ctx.fillText("#3", xR + 20, 245);

        // Bulb #4
        drawBulb(xL, 180);
        ctx.fillText("#4", xL - 40, 185);
        
        // Bulb #5
        drawBulb(xM_vert, 210);
        ctx.fillText("#5", xM_vert - 35, 215);

        // --- Draw Switch S ---
        const switchY_top = 235;
        const switchY_bot = 275;
        // Terminals
        ctx.beginPath();
        ctx.arc(xM_vert, switchY_top, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(xM_vert, switchY_bot, 3, 0, 2 * Math.PI);
        ctx.fill();
        // Switch blade (open)
        ctx.beginPath();
        ctx.moveTo(xM_vert, switchY_top);
        ctx.lineTo(xM_vert + 20, switchY_bot - 10);
        ctx.stroke();
        // Label
        ctx.font = "bold 18px sans-serif";
        ctx.fillText("S", xM_vert - 20, 260);

    </script>
</body>
</html>